<template>
  <div>
    <div ref="header" class="header">
      <van-icon size="16px" name="arrow-left" @click="goback" />
      <div class="title van-ellipsis">{{ title }}</div>
      <!-- <van-icon size="20px" name="share-o" @click="toast" /> -->
      <img src="@/assets/share.png" alt="" width="22px" @click="toast" />
    </div>
    <div class="swiperon">
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide v-for="(item, index) in images" :key="index">
          <!-- <img :src="item" alt="" /> -->
          <div
            class="imgpart"
            :style="'background-image:url(' + item + ')'"
            @click="showimg(index)"
          />
        </swiper-slide>
        <div slot="pagination" class="swiper-pagination" />
      </swiper>
    </div>
    <div class="info">
      <div class="box1">
        <div
          class="housename van-ellipsis"
          style="
            max-width: 92vw;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          "
        >
          {{ housedata.subdistrict }}
        </div>
        <div class="title PV" v-if="userId">
          <img
            src="@/assets/eye.png"
            alt=""
            width="20px"
            style="margin-right: 4px"
          />
          <span>{{ housedata.pv }}+</span>
        </div>
      </div>
      <div class="zhong" v-if="housedata.releaseRole == '2'">
        <div class="whoon">业主挂牌</div>
        <div>佣金费率</div>
        <div>
          <span>0</span>
          <span>中介费</span>
        </div>
      </div>
      <div class="zhong" v-if="housedata.releaseRole == '1'">
        <div class="whoon">经纪人挂牌</div>
        <div>佣金费率</div>
        <div>
          <span>{{
            housedata.transaction_service == "0%"
              ? "面议"
              : housedata.transaction_service
          }}</span>
          <span v-if="housedata.transaction_service != '0%'">中介费</span>
        </div>
      </div>
      <div class="box3">
        <div class="price">{{ housedata.listedPrice }}万<span>总价</span></div>
        <div class="housetype">
          <span v-show="housedata.houseType == '1'">1室1厅1卫</span>
          <span v-show="housedata.houseType == '2'">1室2厅1卫</span>
          <span v-show="housedata.houseType == '3'">2室1厅1卫</span>
          <span v-show="housedata.houseType == '4'">2室2厅1卫</span>
          <span v-show="housedata.houseType == '5'">3室1厅1卫</span>
          <span v-show="housedata.houseType == '6'">3室1厅2卫</span>
          <span v-show="housedata.houseType == '7'">3室2厅1卫</span>
          <span v-show="housedata.houseType == '8'">3室2厅2卫</span>
          <span v-show="housedata.houseType == '9'">4室1厅1卫</span>
          <span v-show="housedata.houseType == '10'">4室1厅2卫</span>
          <span v-show="housedata.houseType == '11'">4室2厅1卫</span>
          <span v-show="housedata.houseType == '12'">4室2厅2卫</span>
        </div>
        <div class="housearea">
          {{ housedata.coveredArea }}m<span class="up">2</span>
        </div>
      </div>
      <div class="box2">
        <!-- <span class="sort">新开盘</span>
        <span class="sort">住宅</span>
        <span class="sort">在建</span>
        <span class="sort">知名开发商</span>
        <span class="sort">品牌公寓</span> -->
      </div>
    </div>
    <div class="timeaddress">
      <!-- <div>
        <img src="../../assets/housetip01.png" alt="" />
        <div class="priadr">周边均价<span>xxxx元/套</span></div>
        <div style="flex: 1"></div>
        <div class="toother">价格趋势<van-icon name="arrow" /></div>
      </div> -->
      <div>
        <img src="../../assets/housetip02.png" alt="" />
        <div
          class="priadr"
          style="
            max-width: 92vw;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: block;
          "
        >
          {{ housedata.address }}
        </div>
        <div style="flex: 1" />
        <!-- <div class="toother" @click="aroundprice">
          周边价格<van-icon name="arrow" />
        </div> -->
      </div>
    </div>
    <div class="houseinfo">
      <div>
        <div>
          <span class="twords">面积</span
          ><span
            >{{ housedata.coveredArea }}m<span class="up">2</span
            ><span class="otherword">(使用面积)</span></span
          >
        </div>
        <div>
          <span class="twords">电梯</span>
          <span v-show="housedata.hasElevator == 1">有</span>
          <span v-show="housedata.hasElevator == 2">无</span>
        </div>
        <div>
          <span class="twords">朝向</span>
          <span v-show="housedata.aspectType == 1">东南</span>
          <span v-show="housedata.aspectType == 2">南</span>
          <span v-show="housedata.aspectType == 3">西南</span>
          <span v-show="housedata.aspectType == 4">西</span>
          <span v-show="housedata.aspectType == 5">西北</span>
          <span v-show="housedata.aspectType == 6">北</span>
          <span v-show="housedata.aspectType == 7">东北</span>
          <span v-show="housedata.aspectType == 8">东</span>
          <span v-show="housedata.aspectType == 9">南北通透</span>
          <span v-show="housedata.aspectType == 10">东西通透</span>
        </div>
        <div><span class="twords">供暖</span><span>暂无</span></div>
      </div>
      <div>
        <div>
          <span class="twords more">挂牌时间</span
          ><span>{{ housedata.createTime }}</span>
        </div>
        <div>
          <span class="twords more">楼层</span>
          <span v-show="housedata.floor == 1">低层1-7层</span>
          <span v-show="housedata.floor == 2">中层8-16层</span>
          <span v-show="housedata.floor == 3">高层17层及以上</span>
        </div>
        <div><span class="twords more">年代</span><span>暂无</span></div>
        <div><span class="twords more">绿化</span><span>暂无</span></div>
      </div>
    </div>
    <div v-if="housedata.releaseRole == '2'" class="moreInfo">
      <div>
        <!-- <span>更详尽房源信息 </span>
        <span>估计更精确 </span>
        <span>(选填)</span> -->
      </div>
      <div>
        <div v-if="housedata.coveredArea != ''">
          <span>建筑面积</span>
          <span>{{ housedata.coveredArea }}㎡</span>
        </div>
        <div v-if="housedata.decorate_cost != ''">
          <span>装修费用</span>
          <span>{{ housedata.decorate_cost }}万元</span>
        </div>
        <div v-if="housedata.decorate_finish_time != ''">
          <span>装修完成时间</span>
          <span>{{ housedata.decorate_finish_time }}</span>
        </div>
      </div>
    </div>
    <div class="housenum">
      房源编号: <span ref="copyword">{{ housedata.houseSn }}</span
      ><span class="copy" @click="copy">复制</span>
    </div>
    <div class="tip">周边配置</div>
    <div class="asideaddress">
      <div v-show="center.length != 0" id="content">
        <div id="normal_map"></div>
      </div>
      <van-tabs
        v-model="keywords"
        title-active-color="#45b7cb"
        title-inactive-color="#333"
        color="#45b7cb"
        @change="showaround"
      >
        <van-tab name="餐饮" title="餐饮">
          <div v-for="item in aroundinfo" :key="item" class="showouteq">
            <van-icon name="location-o" />{{ item }}
          </div>
        </van-tab>
        <van-tab name="地铁" title="交通">
          <div v-for="item in aroundinfo" :key="item" class="showouteq">
            <van-icon name="location-o" />{{ item }}
          </div>
        </van-tab>
        <van-tab name="购物" title="购物">
          <div v-for="item in aroundinfo" :key="item" class="showouteq">
            <van-icon name="location-o" />{{ item }}
          </div>
        </van-tab>
        <van-tab name="休闲" title="休闲">
          <div v-for="item in aroundinfo" :key="item" class="showouteq">
            <van-icon name="location-o" />{{ item }}
          </div>
        </van-tab>
        <van-tab name="学校" title="学校">
          <div v-for="item in aroundinfo" :key="item" class="showouteq">
            <van-icon name="location-o" />{{ item }}
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- <div class="tip">街景地图</div>
    <div class="streetscape">
      <baidu-map
        class="showstreet"
        :center="center2"
        ak="o3rIKa0I3thGV2XnHHI5ktLmpjcEbCxI"
        :zoom="15"
      >
        <bm-panorama />
      </baidu-map>
    </div> -->
    <div v-show="housedata.surroundingsVideo" class="tip">周边环境视频</div>
    <div v-show="housedata.surroundingsVideo" class="see">
      <video
        preload="metadata"
        :poster="housedata.surroundingsVideo + '?vframe/jpg/offset/1'"
        :src="housedata.surroundingsVideo"
        controls="controls"
      />
    </div>
    <div class="showtipwords">*数据来源网络,仅供参考</div>
    <div>
      <div class="moreDescription" v-if="housedata.house_genre != ''">
        <div>房屋类型</div>
        <div>
          <div
            v-for="(item, index) in houseType"
            :key="index"
            :class="housedata.house_genre == item ? 'moreDesCheck' : ''"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="moreDescription" v-if="housedata.aspect_type != ''">
        <div>朝向类型</div>
        <div>
          <div
            v-for="(item, index) in orientation"
            :key="index"
            :class="housedata.aspect_type == item ? 'moreDesCheck' : ''"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="moreDescription" v-if="housedata.decoration != ''">
        <div>装修情况</div>
        <div>
          <div
            v-for="(item, index) in renovation"
            :key="index"
            :class="housedata.decoration == item ? 'moreDesCheck' : ''"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="moreDescription" v-if="housedata.property_cert != ''">
        <div>房产证情况</div>
        <div>
          <div
            v-for="(item, index) in property"
            :key="index"
            :class="housedata.property_cert == item ? 'moreDesCheck' : ''"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="moreDescription" v-if="housedata.unpaid_situation != ''">
        <div>欠款情况</div>
        <div>
          <div
            v-for="(item, index) in arrears"
            :key="index"
            :class="housedata.unpaid_situation == item ? 'moreDesCheck' : ''"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="moreDescription" v-if="housedata.owner_mentality != ''">
        <div>业主心态</div>
        <div>
          <div
            v-for="(item, index) in mentality"
            :key="index"
            :class="housedata.owner_mentality == item ? 'moreDesCheck' : ''"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="moreDescription" v-if="housedata.owner_attitude != ''">
        <div>业主态度</div>
        <div>
          <div
            v-for="(item, index) in attitude"
            :key="index"
            :class="housedata.owner_attitude == item ? 'moreDesCheck' : ''"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="moreDescription" v-if="housedata.look_situation != ''">
        <div>带看情况</div>
        <div>
          <div
            v-for="(item, index) in takeLook"
            :key="index"
            :class="housedata.look_situation == item ? 'moreDesCheck' : ''"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="moreDescription" v-if="housedata.accept_loan != ''">
        <div>是否接受贷款</div>
        <div>
          <div
            v-for="(item, index) in loan"
            :key="index"
            :class="housedata.accept_loan == item ? 'moreDesCheck' : ''"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div>
    <div class="tip">同小区在售房源</div>
    <div class="maylike">
      <div v-show="morehousedata.length != 0" class="house">
        <img src="../../assets/logo.png" alt="" />
        <div class="intrduce">
          <span class="title1">subdistrict</span>
          <span class="title2">
            <span>70年</span>| <span>houseType</span>|
            <span>item.roomAcre</span>
          </span>
          <span class="tips">
            <span>官方认证</span>
            <span>金牌顾问</span>
            <span>别墅</span>
          </span>
          <span class="title3">128万<span>14011.89元/m2</span></span>
        </div>
      </div>
      <div v-show="morehousedata.length == 0" class="nohouse">
        <img src="../../assets/nohouse.png" alt="" />
        <div>暂无同小区在售房源</div>
      </div>
    </div>
    <div class="tip">相似楼盘房源</div>
    <div class="maylike same">
      <div v-show="samehouselist.length != 0">
        <div
          v-for="(item, index) in samehouselist"
          :key="index"
          @click="jumptobuydetail(item.houseId, item)"
        >
          <div v-show="item.subdistrict != housedata.subdistrict" class="house">
            <img :src="item.houseImage" />
            <div class="intrduce">
              <div class="title1">{{ item.subdistrict }}</div>
              <div class="title2">
                <span>{{ item.houseType }}</span
                >|<span>{{ item.coveredArea }}m<span class="up">2</span></span
                >|<span>{{ item.floor }}</span>
              </div>
              <div class="tips">
                <span v-show="item.aspectType">{{ item.aspectType }}</span>
                <span v-show="item.decoration">{{ item.decoration }}</span>
                <span v-show="item.houseGenre">{{ item.houseGenre }}</span>
              </div>
              <div v-show="item.listedPrice != '面议'" class="title3">
                {{ item.listedPrice }}万<span>
                  <span
                    >{{
                      ((item.listedPrice * 10000) / item.coveredArea).toFixed(2)
                    }} </span
                  >元/m<span class="up">2</span></span
                >
              </div>
              <div v-show="item.listedPrice == '面议'" class="title3">
                {{ item.listedPrice }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="samehouselist.length == 0" class="nohouse">
        <img src="../../assets/nohouse.png" alt="" />
        <div>暂无相似楼盘房源</div>
      </div>
    </div>
    <div class="btnpart">
      <div class="top">
        <div>
          <van-icon
            v-show="!collect"
            style="margin-right: 3px"
            name="star-o"
            color="#333"
            @click="change1"
            >关注</van-icon
          >
          <van-icon
            v-show="collect"
            color="#45a7cd"
            name="star"
            style="margin-right: 3px"
            @click="change2"
            >关注</van-icon
          >
        </div>
        <van-button class="cancelbtn" @click="jump">在线沟通</van-button>
        <van-button @click="jumptobuy" v-if="housedata.releaseRole == 2">
          <div>直连业主</div>
          <div class="vanb">隐私电话</div>
        </van-button>
        <van-button @click="jumptobuydai" v-if="housedata.releaseRole == 1">
          <div>预约带看</div>
        </van-button>
      </div>
      <div class="safe" />
    </div>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
    <van-overlay :show="show" class="zhe">
      <img src="@/assets/loudou.gif" alt="" width="50px" />
    </van-overlay>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmPanorama from "vue-baidu-map/components/controls/Panorama.vue";
import { _local } from "@/utils/storage";
import { getTianPeriphery } from "@/apis/map";

import {
  getBuyhouselist,
  getBuyhousedetail,
  getUnloginBuyHousedetail,
  collectBuyHouse,
  cancelcollectBuyHouse,
} from "../../apis/house";
import { getImpay, BuyImpay, virtualNum } from "../../apis/user.js";
import { ConsumerTakeLook } from "../../apis/buy.js";
import {
  getRyId,
  getUserId,
  getGeolocation,
  setHouseListBuy,
  getHouseListBuy,
  getChooseCity,
} from "@/utils/auth";
// import { OWNER_CONTACT_INTEGRAL, TAKE_A_LOOK } from "@/construct/const";
import { mapGetters } from "vuex";
import { shareIntegral } from "@/apis/integral";
import { addLog } from "@/apis/user";
import { getNearby } from "@/apis/city";

export default {
  components: {
    BaiduMap,
    BmPanorama,
  },
  data() {
    return {
      houseType: ["刚需小户", "大平层", "别墅", "公寓"],
      orientation: [
        "东南",
        "南",
        "西南",
        "西",
        "西北",
        "北",
        "东北",
        "东",
        "南北通透",
        "东西通透",
      ],
      elevator: ["有", "无", "电梯入户"],
      renovation: ["精装修", "毛坯", "简装"],
      property: ["不满2年", "满2年", "满5年"],
      only: ["是", "否"],
      arrears: ["有欠款", "红本在手"],
      mentality: ["急售", "佛系随缘", "平稳"],
      attitude: ["很好说话", "一般", "不好说话"],
      takeLook: ["钥匙在手", "业主自住", "租客在住", "房屋空置"],
      loan: ["是", "否"],
      time: 0,
      timer: "",
      show: true,
      title: "",
      ryId: "",
      myryId: "",
      houseId: "",
      userId: "",
      housedata: {},
      morehousedata: [],
      samehouselist: [],
      currentPage: 1,
      perPage: 10,
      loading: false,
      images: [],
      active: 0,
      loc: [],
      imgurl: "",
      showShare: false,
      collect: false,
      options: [[{ name: "微信", icon: "wechat" }]],
      center: [104.066301, 30.572961],
      center2: { lng: "", lat: "" },
      center3: "",
      zoom: 14,
      markers: [],
      radius: 1000,
      keywords: "餐饮",
      aroundinfo: [],
      showmap: false,
      swiperOption: {
        slidesPerView: "auto",
        spaceBetween: 10,
        pagination: {
          el: ".swiper-pagination",
          type: "fraction",
        },
      },
    };
  },
  computed: {
    ...mapGetters(["role", "integral"]),
  },
  watch: {
    housedata(newValue, oldValue) {
      if (newValue) {
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0;
      }
    },
  },
  created() {
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
    //h5+功能接口需要调用此函数
    const _this = this;
    _this.$plusReady(() => {
      plus.share.getServices(function (e) {
        _this.shareData = e;
        for (var i in e) {
          if (e[i].id == "weixin") {
            _this.sharewx = e[i];
          }
        }
      });
    });
    _this.myryId = getRyId();
    _this.houseId = _this.$route.query.houseId;
    _this.userId = getUserId() ? getUserId() : "";
    if (_this.userId) {
      _this.gethouseinfo();
      _this.getHouse();
      _this.$store.dispatch("manage/getInfo", { userId: this.userId });
    } else {
      _this.getUnloginhouseinfo();
      _this.getHouse();
    }
  },
  mounted() {
    this.getTime();
    window.addEventListener("scroll", this.showScroll);
  },
  destroyed() {
    clearInterval(this.timer);
    this.getUserInfo();
    window.removeEventListener("scroll", this.showScroll);
  },
  methods: {
    virtualcall() {
      const _this = this;
      virtualNum({ callUserId: _this.ryId }).then((res) => {
        console.log("virtualNum:", res);
        if (res.code === 201) {
          window.location.href = `tel:${res.result.number}`;
        } else {
          _this.$toast("拨号失败");
        }
      });
    },
    getTime() {
      this.timer = setInterval(() => {
        this.time++;
      }, 1000);
    },
    getUserInfo() {
      addLog({
        adcode: _local.get("adCode"),
        code: "holding",
        page_name: "二手房详情页",
        system: _local.get("device"),
        uid: _local.get("ryId"),
        time: this.time,
        describe: `城市:${_local.get("city")},房源编号:${
          this.housedata.houseSn
        }`,
      }).then((res) => {});
    },
    toast() {
      if (this.userId) {
        this.showShare = true;
      } else {
        this.$router.push("/login");
      }
    },
    goback() {
      this.$router.go(-1);
    },
    showimg(index) {
      ImagePreview({
        images: this.images,
        loop: false,
        startPosition: index,
      });
    },
    getHouse() {
      const chooseCity = getChooseCity();
      if (chooseCity) {
        getBuyhouselist({
          citycode: chooseCity.cityCode,
          currentPage: this.currentPage,
          perPage: this.perPage,
        }).then((response) => {
          this.samehouselist = response.result.list;
          if (this.samehouselist.length === 10) {
            this.loading = true;
          }
        });
      } else {
        const geolocation = getGeolocation();
        getBuyhouselist({
          citycode: geolocation ? geolocation.cityCode : "",
          currentPage: this.currentPage,
          perPage: this.perPage,
        }).then((response) => {
          this.samehouselist = response.result.list;
          if (this.samehouselist.length === 10) {
            this.loading = true;
          }
        });
      }
    },
    jumptobuydetail(e, item) {
      const list = getHouseListBuy();
      for (let i = 0; i < list.length; i++) {
        if (list[i].houseId === item.houseId) {
          list.splice(i, 1);
        }
      }
      list.unshift(item);
      setHouseListBuy(list);
      this.$router.push({ path: "/buyhousedetail", query: { houseId: e } });
      setTimeout(() => {
        window.location.reload();
      }, 100);
      // if (this.userId) {
      //   this.gethouseinfo();
      //   this.getHouse();
      // } else {
      //   this.getUnloginhouseinfo();
      //   this.getHouse();
      // }
      // document.documentElement.scrollTop = 0;
    },
    jump() {
      const _this = this;
      // console.log(this.housedata.releaseRole)
      if (_this.userId) {
        if (_this.role === 5) {
          // console.log(_this.housedata.releaseRole)
          if (_this.housedata.releaseRole == "1") {
            _this.$router.push({
              path: "/chatcontent",
              query: { sendId: _this.housedata.im_uid },
            });
          } else if (_this.housedata.releaseRole == "2") {
            getImpay({
              targetUid: _this.ryId,
              houseSn: _this.housedata.houseSn,
            }).then((res) => {
              if (res.code === 201 || res.code === 201) {
                if (res.result.obtain == 0) {
                  if (_this.housedata.contact_owner_num == 0) {
                    _this.$dialog
                      .confirm({
                        title: "温馨提示",
                        className: "leftpart",
                        confirmButtonText: "立即购买",
                        confirmButtonColor: "#45b7cb",
                        cancelButtonText: "取消",
                        message:
                          "直卖房源0中介费，立省很多个W！需购买【直连直买】服务包与业主取得联系",
                        messageAlign: "left",
                      })
                      .then(() => {
                        _this.$router.push({ path: "/servicebuyzm" });
                      })
                      .catch(() => {});
                  } else {
                    _this.$dialog
                      .confirm({
                        title: "温馨提示",
                        message:
                          "消耗1次直买次数，发起在线聊天后，再次对此房源发起聊天不扣除次数。",
                        confirmButtonText: "马上联系",
                        confirmButtonColor: "#45b7cb",
                        cancelButtonText: "取消",
                        messageAlign: "left",
                      })
                      .then(() => {
                        BuyImpay({
                          houseId: _this.houseId,
                          houseSn: _this.housedata.houseSn,
                        }).then((rep) => {
                          console.log(rep);
                          if (rep.code === 200 || rep.code === 201) {
                            _this.$router.push({
                              path: "/chatcontent",
                              query: { sendId: _this.housedata.im_uid },
                            });
                          }
                        });
                      })
                      .catch(() => {});
                  }
                } else if (res.result.obtain == 1) {
                  _this.$router.push({
                    path: "/chatcontent",
                    query: { sendId: _this.housedata.im_uid },
                  });
                }
              }
            });
          }
        } else {
          _this.$dialog
            .alert({
              title: "温馨提示",
              message: "请在个人中心切换【买家】身份使用该功能",
              confirmButtonColor: "#45b7cb",
              theme: "round-button",
              messageAlign: "left",
            })
            .then(() => {});
        }
      } else {
        this.$router.push({ path: "/login" });
      }
    },
    jumptobuydai() {
      const _this = this;
      if (_this.userId) {
        if (_this.role === 5) {
          if (
            _this.housedata.is_contact == 0 &&
            _this.housedata.releaseRole == 2
          ) {
            _this.$dialog
              .confirm({
                title: "温馨提示",
                confirmButtonText: "立即购买",
                confirmButtonColor: "#45b7cb",
                cancelButtonText: "取消",
                message:
                  "直卖房源0中介费，立省很多个W！需购买【直连直买】服务包与业主取得联系",
                messageAlign: "left",
              })
              .then(() => {
                _this.$router.push({ path: "/servicebuyzm" });
              })
              .catch(() => {});
          } else {
            if (_this.housedata.take_look_num == 0) {
              _this.$dialog
                .confirm({
                  title: "温馨提示",
                  confirmButtonText: "立即购买",
                  confirmButtonColor: "#45b7cb",
                  cancelButtonText: "取消",
                  message:
                    "您当前的带看次数不足，仅需0.01元即可指定经纪人带看房源，前往购买服务？",
                  messageAlign: "left",
                })
                .then(() => {
                  _this.$router.push({ path: "/servicebuydk" });
                })
                .catch(() => {});
            } else {
              _this.$dialog
                .confirm({
                  title: "温馨提示",
                  message:
                    "消耗1次带看次数，预约成功2个工作日内经纪人会联系为您服务。",
                  confirmButtonText: "确定预约",
                  confirmButtonColor: "#45b7cb",
                  cancelButtonText: "取消",
                  messageAlign: "left",
                })
                .then(() => {
                  ConsumerTakeLook({
                    houseId: _this.houseId,
                    houseSn: _this.housedata.houseSn,
                  }).then((res) => {
                    console.log(res);
                    if (res.code === 200 || res.code === 201) {
                      _this.$dialog
                        .confirm({
                          title: "使用成功",
                          message:
                            "请等待经纪人与您联系，您也可以在个人中心-订单管理查看进程",
                          messageAlign: "left",
                        })
                        .then(() => {
                          _this.$router.push({ path: "/home/me" });
                        });
                    } else if (res.code == 2086) {
                      _this.$toast(res.msg);
                    } else {
                      _this.$toast("使用失败,预约带看次数不足请及时充值");
                    }
                  });
                })
                .catch(() => {});
            }
          }
        } else {
          _this.$dialog
            .alert({
              title: "温馨提示",
              message: "请在个人中心切换【买家】身份使用该功能",
              confirmButtonColor: "#45b7cb",
              theme: "round-button",
              messageAlign: "left",
            })
            .then(() => {});
        }
      } else {
        _this.$router.push({ path: "/login" });
      }
    },
    jumptobuy() {
      const _this = this;
      // console.log(this.housedata.releaseRole)
      if (_this.userId) {
        if (_this.role === 5) {
          // console.log(_this.housedata.releaseRole)
          if (_this.housedata.releaseRole == "1") {
            _this.virtualcall();
            // _this.$router.push({
            //   path: "/chatcontent",
            //   query: { targetId: this.ryId },
            // });
          } else if (_this.housedata.releaseRole == "2") {
            getImpay({
              targetUid: _this.ryId,
              houseSn: _this.housedata.houseSn,
            }).then((res) => {
              if (res.code === 201 || res.code === 201) {
                if (res.result.obtain == 0) {
                  if (_this.housedata.contact_owner_num == 0) {
                    _this.$dialog
                      .confirm({
                        title: "温馨提示",
                        className: "leftpart",
                        confirmButtonText: "立即购买",
                        confirmButtonColor: "#45b7cb",
                        cancelButtonText: "取消",
                        message:
                          "直卖房源0中介费，立省很多个W！需购买【直连直买】服务包与业主取得联系",
                        messageAlign: "left",
                      })
                      .then(() => {
                        _this.$router.push({ path: "/servicebuyzm" });
                      })
                      .catch(() => {});
                  } else {
                    _this.$dialog
                      .confirm({
                        title: "温馨提示",
                        message:
                          "消耗1次直买次数，发起在线聊天后，再次对此房源发起聊天不扣除次数。",
                        confirmButtonText: "马上联系",
                        confirmButtonColor: "#45b7cb",
                        cancelButtonText: "取消",
                        messageAlign: "left",
                      })
                      .then(() => {
                        BuyImpay({
                          houseId: _this.houseId,
                          houseSn: _this.housedata.houseSn,
                        }).then((rep) => {
                          console.log(rep);
                          if (rep.code === 200 || rep.code === 201) {
                            _this.virtualcall();
                          }
                        });
                      })
                      .catch(() => {});
                  }
                } else if (res.result.obtain == 1) {
                  _this.virtualcall();
                }
              }
            });
          }
        } else {
          _this.$dialog
            .alert({
              title: "温馨提示",
              message: "请在个人中心切换【买家】身份使用该功能",
              confirmButtonColor: "#45b7cb",
              theme: "round-button",
              messageAlign: "left",
            })
            .then(() => {});
        }
      } else {
        this.$router.push({ path: "/login" });
      }
    },
    aroundprice() {
      this.$router.push({ path: "/aroundprice" });
    },
    async change1() {
      if (this.userId) {
        await collectBuyHouse({ houseId: this.houseId }).then((res) => {
          if (res.code === 2039 || res.code === 200) {
            this.$toast.success("关注成功");
            this.collect = true;
          }
        });
      } else {
        this.$router.push({ path: "/login" });
      }
    },
    async change2() {
      await cancelcollectBuyHouse({ houseId: this.houseId }).then((res) => {
        if (res.code === 2040 || res.code === 200) {
          this.$toast.success("取消关注成功");
          this.collect = false;
        }
      });
    },
    copy() {
      this.$copyText(`${this.housedata.houseSn}`).then(() => {
        this.$toast.success("复制成功");
      });
    },
    shareGetIntegral() {
      const _this = this;
      shareIntegral({ type: 5 }).then((res) => {
        if (res.code === 200) {
          _this.$toast("分享成功，获得1积分");
        }
      });
    },
    onSelect(option) {
      const _this = this;
      _this.showShare = false;
      if (option.name === "微信") {
        if (_local.get("role") == 1) {
          var msg = {
            type: "web",
            title: "亲,这里有0中介费的直租好房！",
            content: `租房神器！房东直租没有中介费，价格比长租公寓便宜`,
            thumbs: ["https://image.nunbdc.net/image/152-152.png"],
            href: "https://html.nunbdc.net/share2.html",
            extra: { scene: "WXSceneSession" },
          };
        }
        if (_local.get("role") == 5) {
          var msg = {
            type: "web",
            title: "亲，这里有业主直卖房源！",
            content: `0中介费,价格和业主直接谈，省时省心更省钱！`,
            thumbs: ["https://image.nunbdc.net/image/152-152.png"],
            href: "https://html.nunbdc.net/maishare.html",
            extra: { scene: "WXSceneSession" },
          };
        }
        if (_local.get("role") == 2 || _local.get("role") == 3) {
          var msg = {
            type: "web",
            title: "亲,这里可以直卖直租0中介费！",
            content: `租客多、买家多、快速交易、快速变现！省时省心更赚钱`,
            thumbs: ["https://image.nunbdc.net/image/152-152.png"],
            href: "https://html.nunbdc.net/FangShare.html",
            extra: { scene: "WXSceneSession" },
          };
        }
        if (_local.get("role") == 4) {
          var msg = {
            type: "web",
            title: "兄弟，我在这里可以抢单抢红包！",
            content: `经纪人赚钱神器！全平台自由协作不分佣不扣佣，赚钱多结算快！`,
            thumbs: ["https://image.nunbdc.net/image/152-152.png"],
            href: "https://html.nunbdc.net/agent6.html",
            extra: { scene: "WXSceneSession" },
          };
        }
        _this.sharewx.send(
          msg,
          function () {
            if (_local.get("role") == 1 || _local.get("role") == 4) {
              _this.shareGetIntegral();
            }
            _this.$toast.success("分享成功");
          },
          function () {
            _this.$toast("分享失败");
          }
        );
      }
    },
    gethouseinfo() {
      const _this = this;
      getBuyhousedetail({
        houseId: _this.houseId,
      }).then((response) => {
        console.log("房屋详情", response);
        if (response.code === 201) {
          _this.show = false;
          _this.housedata = response.result;
          _this.images = response.result.images;
          _this.ryId = response.result.ryId;
          _this.center[0] = Number(response.result.lng);
          _this.center[1] = Number(response.result.lat);
          _this.showmap = true;
          _this.center2.lng = response.result.lng;
          _this.center2.lat = response.result.lat;
          _this.center3 = this.center.join(",");
          if (response.result.collected === 2) {
            _this.collect = true;
          }
          _this.showaround();
        } else {
          _this.$toast("获取数据失败，请重试");
        }
      });
    },
    getUnloginhouseinfo() {
      const _this = this;
      getUnloginBuyHousedetail({
        houseId: _this.houseId,
      }).then((response) => {
        console.log("未登录房屋详情", response);
        if (response.code === 201) {
          _this.show = false;
          _this.housedata = response.result;
          _this.images = response.result.images;
          _this.center[0] = Number(response.result.lng);
          _this.center[1] = Number(response.result.lat);
          _this.showmap = true;
          _this.center2.lng = response.result.lng;
          _this.center2.lat = response.result.lat;
          _this.center3 = _this.center.join(",");
          _this.showaround();
        } else {
          _this.$toast("获取数据失败，请重试");
        }
      });
    },
    showaround() {
      //初始化地图对象
      var map = new T.Map("normal_map");
      var lnglat = new T.LngLat(this.center[0], this.center[1]);
      map.centerAndZoom(lnglat, 12);
      map.enableDrag();
      getNearby({
        keyword: this.keywords,
        lon: this.center[0],
        lat: this.center[1],
      }).then((res) => {
        console.log("getTianPeriphery", res);
        this.aroundinfo = [];
        res.result.pois.forEach((item) => {
          const info = item.distance + " " + item.address + " " + item.name;
          this.aroundinfo.push(info);
          var lng = item.lonlat.split(",")[0];
          var lat = item.lonlat.split(",")[1];
          // 普通地图展示
          var point = new T.LngLat(lng, lat);
          var marker = new T.Marker(point); // 创建标注
          map.addOverLay(marker);
        });
      });
    },
    showScroll() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      const windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      const scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop > 120) {
        this.$refs.header.style.backgroundColor = "#fff";
        this.$refs.header.style.color = "#333";
        this.title = this.housedata.subdistrict;
      } else {
        this.$refs.header.style.color = "#fff";
        this.$refs.header.style.backgroundColor = "";
        this.title = "";
      }
      if (scrollTop + windowHeight >= scrollHeight - 20 && this.loading) {
        this.currentPage++;
        const geolocation = getGeolocation();
        if (geolocation) {
          const cityCode = geolocation.cityCode;
          getBuyhouselist({
            citycode: _local.get("cityCode"),
            currentPage: this.currentPage,
            perPage: this.perPage,
          }).then((response) => {
            if (response.result.list.length !== 10) {
              this.loading = false;
            }
            this.samehouselist = [
              ...this.samehouselist,
              ...response.result.list,
            ];
          });
        } else {
          getBuyhouselist({
            currentPage: this.currentPage,
            perPage: this.perPage,
            citycode: _local.get("cityCode"),
          }).then((response) => {
            if (response.result.list.length !== 10) {
              this.loading = false;
            }
            this.samehouselist = [
              ...this.samehouselist,
              ...response.result.list,
            ];
          });
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.PV {
  display: flex;
  align-items: center !important;
  font-weight: normal !important;
  font-size: 12px !important;
  color: #ccc !important;
}
.moreInfo {
  margin: 20px 15px;
  & > div:nth-child(1) {
    span:nth-child(1),
    span:nth-child(2) {
      font-weight: bold;
    }
    span:nth-child(3) {
      font-size: 12px;
      color: #666;
    }
  }
  & > div:nth-child(2) > div {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    span:nth-child(1) {
      font-size: 14px;
    }
    span:nth-child(2) {
      font-size: 15px;
    }
  }
}
.moreDesCheck {
  background-color: #93d7e6 !important;
  color: #097386 !important;
}
.moreDescription {
  margin: 10px 0 10px 15px;
  & > div:nth-child(1) {
    font-weight: bold;
    font-size: 14px;
  }
  & > div:nth-child(2) {
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
    div {
      margin-right: 2.6vw;
      border-radius: 14px;
      background-color: #f2f2f2;
      color: #666;
      font-size: 13px;
      width: 20.8vw;
      height: 7.7vw;
      text-align: center;
      line-height: 7.7vw;
      margin-bottom: 10px;
    }
  }
}
.vanb {
  text-align: center;
  font-size: 12px;
}
.zhong {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #45b7cb;
  margin: 5px 0 15px;
  span:nth-child(1) {
    font-size: 16px;
    font-weight: bolder;
  }
}
#normal_map {
  margin-top: 10px;
  width: 92vw;
  height: 48vw;
}
.zhe {
  background-color: #fff;
  width: 100vw;
  height: 100vh;
  z-index: 100000;
}
.van-overlay {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header {
  position: fixed;
  left: 0;
  top: 0;
  padding: 10px 15px;
  z-index: 1000;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: 15px;
  color: #fff;
  img {
    background-color: #dddddd;
    opacity: 0.8;
    border-radius: 50%;
    box-sizing: border-box;
    padding: 2px;
    color: #333333;
    border: 1px solid white;
  }
  .van-icon {
    background-color: #dddddd;
    opacity: 0.8;
    border-radius: 50%;
    box-sizing: border-box;
    padding: 2px;
    color: #333333;
    border: 1px solid white;
  }
  .title {
    flex: 1;
    font-size: 19px;
    font-weight: bold;
    text-align: center;
  }
}
.swiperon {
  width: 100%;
  height: 200px;
  .imgpart {
    width: 100%;
    height: 250px;
    background-repeat: no-repeat;
    background-position-x: 0px;
    background-position-y: center;
    background-size: 100%;
    margin-bottom: 10px;
  }
}
.info {
  margin: 50px 15px 0;
  .box1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    .housename {
      font-size: 24px;
      color: #333;
      font-weight: bold;
      width: 230px;
    }
    .whoon {
      font-size: 14px;
      color: #45b7cb;
    }
  }
  .box2 {
    margin: 20px 0;
    .sort {
      display: inline-block;
      padding: 2px 7px;
      font-size: 12px;
      color: #45b7cb;
      border: 1px solid #45b7cb;
      margin: 1px;
    }
  }
  .box3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .price {
      text-align: center;
      color: #d43b33;
      font-size: 18px;
      font-weight: bold;
      span {
        font-size: 12px;
        color: #333;
        font-weight: normal;
      }
    }
    .housetype {
      letter-spacing: 1px;
    }
    .housearea,
    .housetype {
      font-weight: bold;
      color: #d43b33;
      text-align: center;
    }
  }
}
.up {
  font-size: 9px;
  vertical-align: super;
}
.timeaddress {
  margin: 10px 15px;
  background-color: #ecf8fa;
  > div {
    display: flex;
    align-items: center;
    padding: 10px;
    img {
      width: 22px;
      height: 22px;
      margin-right: 5px;
    }
    .priadr {
      font-size: 15px;
      color: #333;
      display: flex;
      align-items: center;
      span {
        display: inline-block;
        margin-left: 10px;
        color: #d43b33;
      }
    }
    .toother {
      font-size: 13px;
      color: #666;
    }
  }
}
.houseinfo {
  margin: 10px 15px 5px;
  display: flex;
  justify-content: space-between;
  > div {
    width: 50%;
    > div {
      font-size: 14px;
      color: #333;
      margin-bottom: 10px;
      display: flex;
      align-items: baseline;
      .twords {
        font-size: 14px;
        color: #666;
        margin-right: 7px;
        font-weight: normal;
      }
      .more {
        display: inline-block;
        width: 60px;
      }
      .otherword {
        font-size: 12px;
        color: #666;
        font-weight: normal;
      }
    }
  }
}
.asideaddress {
  margin: 20px 15px 0;
  /deep/ #content {
    margin: 10px auto 0;
    height: 200px;
    width: 100%;
    .amap-page-container {
      height: 200px;
    }
    .amap-demo {
      height: 100%;
    }
  }
  .showouteq {
    margin: 10px 15px;
    font-size: 12px;
    color: #333;
  }
}
.streetscape {
  margin: 10px 15px;
  .showstreet {
    margin-top: 20px;
    height: 200px;
    /deep/.anchorBL {
      display: none;
    }
  }
}
.see {
  margin: 10px 15px;
  video {
    margin-top: 10px;
    width: 100%;
    height: 200px;
  }
}
.house {
  background-color: #fff;
  display: flex;
  padding: 10px;
  img {
    width: 130px;
    height: 120px;
    min-width: 130px;
    max-width: 130px;
    border-radius: 5px;
  }
  .intrduce {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    width: 190px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    .title1 {
      font-size: 16px;
      font-weight: 550;
      color: #333333;
    }
    .title2 {
      font-size: 12px;
      color: #a0a0a0;
      span {
        margin: 0 2px;
      }
    }
    .tips {
      span {
        font-size: 10px;
        display: inline-block;
        margin-right: 5px;
        padding: 3px !important;
        border: 0 !important;
        background-color: #7bc8db2f;
        color: #5eb9d0;
        border-radius: 5px;
      }
    }
    .title3 {
      color: #d43b33;
      font-size: 16px;
      font-weight: bold;
      span {
        font-size: 12px;
        margin-left: 3px;
        color: #333;
      }
    }
  }
}
.tip {
  font-weight: bold;
  margin: 20px 15px 10px;
  display: flex;
  justify-content: space-between;
  > span {
    font-size: 13px;
    color: #999;
    display: flex;
    align-items: center;
  }
}
.showtipwords {
  font-size: 12px;
  color: #333;
  margin: 0 15px;
}
.maylike {
  margin: 10px 15px;
  .nohouse {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 150px;
    }
    div {
      font-size: 14px;
      color: #333;
      font-weight: bold;
      margin-top: 20px;
    }
  }
}
.same {
  padding-bottom: 80px;
}
.house {
  background-color: #fff;
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #f1f1f1;
  img {
    width: 120px;
    height: 110px;
  }
  .intrduce {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    .title1 {
      font-size: 16px;
      font-weight: 550;
      color: #333333;
    }
    .title2 {
      font-size: 12px;
      color: #a0a0a0;
      span {
        margin: 0 2px;
      }
    }
    .tips {
      span {
        font-size: 10px;
        display: inline-block;
        margin-right: 5px;
        padding: 0px 2px;
        border: 1px solid #45b7cb;
        color: #45b7cb;
      }
    }
    .title3 {
      color: #d43b33;
      font-size: 16px;
      font-weight: bold;
      span {
        color: #999;
        font-size: 12px;
        margin-left: 6px;
      }
    }
  }
  .up {
    margin: 0px !important;
    font-size: 12px;
    vertical-align: super;
    transform: scale(calc(10 / 12));
  }
}
.housenum {
  padding: 10px;
  margin: 0 15px;
  font-size: 14px;
  color: #333;
  font-weight: bold;
  display: flex;
  align-items: center;
  background-color: #f9f9f9;
  .copy {
    font-size: 12px;
    margin-left: 10px;
    font-weight: normal;
    color: #45b7cb;
    border: 1px solid #45b7cb;
    padding: 2px 3px;
  }
}
.cut {
  height: 70px;
}
.btnpart {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 15px;
  background-color: #fff;
  z-index: 2000;
  .top {
    display: flex;
    justify-content: space-around;
    align-items: center;
    > div {
      font-size: 14px;
      color: #45b7cd;
      display: flex;
      align-items: center;
    }
    .van-button {
      display: inline-block;
      font-size: 16px;
      color: #fff;
      background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
      border-radius: 5px;
      border: none;
      padding: 0 30px;
      border-radius: 20px;
    }
    .cancelbtn:active {
      background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
      color: #fff;
    }
    .cancelbtn {
      border: 1px solid #999;
      background-image: none;
      background-color: #fff;
      color: #999;
    }
  }
  .safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>
